// 客服信息总览 三级路由
import React, { useEffect, useRef } from "react";
import osfCss from "./OverviewOfCustomerServiceInformation.module.css";
import * as echarts from "echarts";

function OverviewOfCustomerServiceInformation() {
  let ref = useRef();
  useEffect(() => {
    var chartDom = ref.current;
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["新增客服", "新增游客", "新增会话"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "2023-06-01",
          "2023-06-05",
          "2023-06-09",
          "2023-06-13",
          "2023-06-17",
          "2023-06-21",
          "2023-06-25",
          "2023-06-29",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "新增客服",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "新增游客",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "新增会话",
          type: "line",
          stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };

    option && myChart.setOption(option);
  }, []);
  return (
    <div className={osfCss.box}>
      <div className={osfCss.left}>
        <div className={osfCss.top}>
          <div>
            <h2
              style={{
                borderBottom: "1px solid #ccc",
                height: "50px",
                lineHeight: "50px",
                paddingLeft: "20px",
              }}
            >
              数据统计
            </h2>
          </div>
          <div>
            <div className={osfCss.divtop}>
              <div
                style={{
                  width: "400px",
                  height: "70px",
                  lineHeight: "30px",
                  background: "#eee",
                  paddingLeft: "10px",
                  marginLeft: "30px",
                  marginTop: "40px",
                }}
              >
                <span style={{ fontSize: "20px" }}>客服总数</span>
                <h2>7</h2>
              </div>
              <div
                style={{
                  width: "400px",
                  height: "70px",
                  lineHeight: "30px",
                  background: "#eee",
                  paddingLeft: "10px",
                  marginLeft: "30px",
                  marginTop: "40px",
                }}
              >
                <span style={{ fontSize: "20px" }}>当前在线客服</span>
                <h2>0</h2>
              </div>
            </div>
            <div className={osfCss.divbom}>
              <div
                style={{
                  width: "400px",
                  height: "70px",
                  lineHeight: "30px",
                  background: "#eee",
                  paddingLeft: "10px",
                  marginLeft: "30px",
                  marginTop: "40px",
                }}
              >
                <span style={{ fontSize: "20px" }}>当前在线访客</span>
                <h2>1</h2>
              </div>
              <div
                style={{
                  width: "400px",
                  height: "70px",
                  lineHeight: "30px",
                  background: "#eee",
                  paddingLeft: "10px",
                  marginLeft: "30px",
                  marginTop: "40px",
                }}
              >
                <span style={{ fontSize: "20px" }}>今日会话</span>
                <h2>0</h2>
              </div>
            </div>
          </div>
        </div>
        <div className={osfCss.bom}>
          <div>
            <h2
              style={{
                borderBottom: "1px solid #ccc",
                height: "50px",
                lineHeight: "50px",
                paddingLeft: "20px",
              }}
            >
              报表统计
            </h2>
          </div>
          <div>
            <div
              id="main"
              style={{ width: "800px", height: "400px", marginTop: "20px" }}
              ref={ref}
            ></div>
          </div>
        </div>
      </div>
      <div className={osfCss.right}>
        <div>
          <h2
            style={{
              borderBottom: "1px solid #ccc",
              height: "50px",
              lineHeight: "50px",
              paddingLeft: "20px",
            }}
          >
            版本信息
          </h2>
        </div>
        <div className={osfCss.serve}>
          <p className={osfCss.p1}>
            <span className={osfCss.s1}>项目名称</span>
            <span className={osfCss.s2}>八维找房在线客服系统</span>
          </p>
          <p className={osfCss.p2}>
            <span className={osfCss.s1}>当前版本</span>
            <span className={osfCss.s2}>v1.0.1</span>
          </p>
          <p className={osfCss.p3}>
            <span className={osfCss.s1}>主要特色</span>
            <span className={osfCss.s2}>方便部署/快速接入</span>
          </p>
        </div>
      </div>
    </div>
  );
}

export default OverviewOfCustomerServiceInformation;
